<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
		<scroll :topArea="44" ref="orderResult" :pullDownRefresh="false" :pullUpLoad="false">
      <div class="res-wrapper">
        <img src="../../assets/img/comm/suc-1.png" alt="" class="pic">
        <p class="result">预约成功</p>
        <div class="note top-div">
            您的租赁订单已经预约成功，请耐心等待后台审核
        </div>
        <div class="note">
            审核结果会及时告知，请保持电话畅通。
        </div>
        <div class="btnWrap">
            <div class="button" @click="goOrder()">查看订单</div>
            <div class="button button-confirm" @click="goLease()">返回首页</div>
        </div>
      </div>
  	</scroll>
	</div>
</template>

<script>
export default {
  name: 'orderResult',
  components: {
  },
  data: function(){
  	return {
      headers: {
        title: "预约成功"
      },
  	}
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    goOrder: function(){
      this.$router.push({"name": "recommend"});
    },
    goLease: function(){
      this.$router.push({"name": "recommend"});
    }
  },
  mounted: function(){
    
  },
}
</script>

<style lang="scss" scoped>
	.outer {
		height: 100%;
    	width: 100%;
    	position: absolute;
      background: #fff;
	}
  .res-wrapper {
    &>img {
      display: block;
      width: 99px;
      height: 99px;
      margin: 0 auto;
      margin-top: 85px;
    }
    & .result {
      width: 100%;
      text-align: center;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      color: #69AFfF;
      margin-top: 41px;
    }
    & .note {
      width: 100%;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      text-align: center;
    }
    & .top-div {
      margin-top: 14px;
    }
    & .btnWrap {
      padding: 36px;
      margin-top: 91px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &>div {
        width: 129px;
      }
    }
  }
</style>